import React from 'react'
import { observer, inject } from 'mobx-react'
import './fmone.css'
@inject('MyStore')
@observer
class FmOne extends React.Component {
    constructor() {
        super()
        this.state = {
            box:<div></div>
        }
    }
    componentDidMount() {
        this.props.MyStore.getfm()
    }
    jump() {
        this.myref.style.display = "none"
        this.setState({
            box:<div>
            <img src={this.props.MyStore.arr[1].album.picUrl} alt="" />
            <p>
                {this.props.MyStore.arr[1].album.name}
            </p>
            <h3>
                <audio src={this.props.MyStore.url[1]} controls></audio><br />
                <br /> &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;
                {this.props.MyStore.url[1] ? '' : '抱歉，资源丢失'}
            </h3>
        </div>
        }) 
    }
    render() {
        // console.log(this.props.MyStore.url, 'uuuuuuuuuuuuuu');
        // console.log(this.props, '000000000000000');




        // 在这边.then
        // console.log(this.props.MyStore.getmusic,'qqqqqqqq++=');
        // console.log(str,'++++++++++++++++++++++++=');
        return (
            <div id="fmone">
                <div id="enter">
                    <div id="haha" onTouchEnd={this.jump.bind(this)} ref={my => this.myref = my}>
                        <br/>
                        <img src={this.props.MyStore.arr[0].album.picUrl} alt="" />
                        <br/>
                        <p>
                            {this.props.MyStore.arr[0].album.name}
                        </p>
                        <h3>
                            <audio src={this.props.MyStore.url[0]} controls></audio><br />
                            <br/>
                            <br /> &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;
                            {this.props.MyStore.url[0] ? '' : '抱歉，资源丢失'}
                        </h3>
                    </div>
                    {this.state.box}
                </div>
            </div>
        )
    }
}
export default FmOne